<template>
	<view class="contain">
		<view class="msg-tlt">请在下方空白处签名</view>
		<view class="main">
			<sp-sign-board
				ref="signBoardRef"
				sid="sign-board"
				:showMark="false"
				:horizontal="false"
				bgColor="#ffffff"
				popupMode
				:needBack="false"
				@firstTouchStart="firstTouchStart"
			></sp-sign-board>
		</view>
		<view class="footer">
			<view class="footer-tips">提交签名即代表您已仔细阅读，充分理解并同意参赛声明 </view>
			<view class="flex-lr">
				<button
					class="footer-btn footer-btn-cancel"
					@click="clearSign"
					:style="{
						color: detailInfo.raceColor || '#0071c5',
						borderColor: detailInfo.raceColor || '#0071c5'
					}"
				>
					重新签名
				</button>
				<button
					class="footer-btn"
					@click="onSubmit"
					:style="{
						backgroundColor: detailInfo.raceColor || '#0071c5',
						borderColor: detailInfo.raceColor || '#0071c5'
					}"
				>
					确认提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			id: '',
			msgDetail: {},
			detailInfo: {},
			timeLimits: 10
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getDetailInfo()

		uni.$on('getSignImg', async (data) => {
			console.log('接收到的数据:', data, this.id) // 处理数据
			app.globalData.signInfo.sign = data.tempFile
			this.$utils.navigateTo(true, `/pagesA/sign/detail?id=${this.id}`)
		})
	},
	methods: {
		getDetailInfo(id) {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/race/race/info/'+this.id,
				data: {}
			},(res) => {
				this.detailInfo = res.data
			})
			/* prettier-ignore */
		},
		setReadMsg() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			/* prettier-ignore */
			this.$https(true, 'post', {
				url: '/Home/Msg/read',
				data: {
					token: uni.getStorageSync('token'),
					id: this.msgDetail.id
					}
			},(res) => {
			})
			/* prettier-ignore */
		},
		firstTouchStart() {
			// 手动调用组件内绘制水印方法重新绘制
			this.$refs.signBoardRef.drawMark(this.markText)
		},
		clearSign() {
			this.$refs.signBoardRef.reset()
		},
		onSubmit() {
			this.$refs.signBoardRef.confirm()
		}
	}
}
</script>

<style scoped lang="scss">
.contain {
	padding: 0 32rpx 210rpx;
}
.msg-tlt {
	font-size: 26rpx;
	color: #666;
	text-align: center;
	padding: 30rpx 0 24rpx;
}
.main {
	border: 1px solid #ccc;
	height: calc(100vh - 310rpx);
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 200rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-tips {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 6rpx 12rpx;
	}
	&-btn {
		width: 332rpx;
		height: 80rpx;
		background-color: #0071c5;
		border: 1px solid #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
		&-cancel {
			background-color: #fff;
			color: #0071c5;
			margin-right: 22rpx;
		}
	}
}
::v-deep {
	.sign-canvas {
		background-color: #fff;
	}
}
</style>
